<template>
  <div id="address-edit">
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
    />
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  #address-edit{
    width: 100%;
    height: 100%;
  }
  
</style>

<script lang="ts">
// @ is an alias to /src
import { 
  Image as VanImage,AddressEdit,Toast
} from 'vant';
import { Component, Prop, Vue, Watch, Model } from 'vue-property-decorator';
import router from '../router';
import store from '../store/index';
import addressApi from '../api/address.api';
import area from '../api/area';

Vue.use(VanImage).use(AddressEdit).use(Toast);
@Component
export default class AddressEditComponent extends Vue {
  private areaList: any=area;
  private searchResult: string[]=[];

  private async onSave(addressInfo){
    const res=await addressApi.addAddress({
      user_name: addressInfo.name,
      tel_number: addressInfo.tel,
      postal_Code:addressInfo.postalCode,
      national_Code:'+86',
      province_Name:addressInfo.province,
      city_Name:addressInfo.city,
      county_Name:addressInfo.county,
      detail_Info:addressInfo.addressDetail,
      is_default:addressInfo.isDefault,
    });
    Toast.success('地址添加成功');
  }
  
}
</script>
